import React, { useState, useEffect }from 'react'
import {createHashHistory} from 'history'
import { NavBar, Icon } from 'antd-mobile';
import axios from 'axios'
import './notice.scss'
const history = createHashHistory();

const Com = () => {
  const [ classNotice, setClassNotice ] = useState([])
  useEffect(() => {
    axios.get('http://rap2.taobao.org:38080/app/mock/253064/class/notice').then(res => {
      if (res.data.code === '200') {
        setClassNotice(res.data.data)
      }
    })
  },[])
  return(
    <>
      <div className="class_notice_header">
        <NavBar
          mode="light"
          icon={<Icon type="left"/>}
          onLeftClick={() => history.goBack()}
          rightContent="刷新"
        >班级通知</NavBar>
      </div>
      <div className="class_notice_content content">
        <div className="notice_list">
          {
            classNotice.map(item => {
              return (
                <div className="list_item" key={item.noticeid} onClick={()=> {
                  history.push('/application/notice_detail')}
                  
                  }>
                  {
                    item.image ? 
                    <div className="item_img_box">
                      <img src='https://www.pmdaniu.com/storages/111988/66d678a659bbba60ba6675613a877ad1-30118/images/%E9%80%9A%E7%9F%A5%E5%88%97%E8%A1%A8/u2454.png' alt=""/>
                    </div>: ''
                  }
                  <div className="title">
                    {item.title}
                  </div>
                  <div className="info_box">
                    <p>{item.people}</p>
                    <p>{item.time}</p>
                    {
                      item.release === 1 ? <p style={{color:'#28bac2'}}>发布中</p>: <p style={{color:'#f89ad8'}}>暂停发布</p>
                    }
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </>
  )
}

export default Com